<template>
  <view class="search">
    <view class="search-content">
      <view class="search-input">
        <icon class="search-icon" type="search" size="14"></icon>
        <input
          placeholder="请输入你想要的商品"
          v-model="inputVal"
          @input="handleInput"
          @confirm="confirmVal"
          confirm-type="search"
        >
      </view>
      <button type="default" v-show="inputVal" @tap="cacel">取消</button>
    </view>
    <view>
      <view class="qs-content" scroll-y v-if="inputVal">
      <block v-for="(item,index) in qs_data" :key="index">
        <view class="qs-item" @tap="gotodetal(item.goods_id)">{{item.goods_name}}</view>
      </block>
    </view>
    <block v-else>
      <view class="history-tytle" v-if="historyArr.length>0">
        <view>历史搜索</view>
        <icon type="clear" size="14" @tap="clearHistory"></icon>
      </view>
      <view class="history">
        <block v-for="(item,index) in historyArr" :key="index">
          <view class="history-item" @tap="gotoList(item)">{{item}}</view>
        </block>
      </view>
    </block>
    </view>
  </view>
</template>
<script>
import { getqsearchData } from "@/api";
export default {
  data() {
    return {
      inputVal: "",
      qs_data: [],
      historyArr: []
    };
  },
  onShow() {
    this.historyArr = wx.getStorageSync("history") || [];
  },
  methods: {
    handleInput() {
      getqsearchData({ query: this.inputVal }).then(res => {
        this.qs_data = res.data.message;
      });
    },
    confirmVal() {
      wx.navigateTo({
        url: "/pages/goods_list/main?keyword=" + this.inputVal
      });
      this.historyArr.unshift(this.inputVal);
      this.historyArr = [...new Set(this.historyArr)];
      wx.setStorageSync("history", this.historyArr);
      this.inputVal = "";
    },
    gotodetal(id) {
      wx.navigateTo({
        url: "/pages/detail/main?id=" + id
      });
    },
    clearHistory() {
      this.historyArr = [];
      wx.removeStorageSync("history");
    },
    gotoList(item) {
      wx.navigateTo({
        url: "/pages/goods_list/main?keyword=" + item
      });
    },
    cacel() {
      this.inputVal = "";
    }
  }
};
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  .search-content {
    display: flex;
    padding: 20rpx 16rpx;
    background: #ccc;
    .search-input {
      display: flex;
      flex: 1;
      align-items: center;
      background: #fff;
      height: 60rpx;
      border-radius: 10rpx;
      input {
        background: #fff;
        font-size: 30rpx;
        text-indent: 10rpx;
      }
      .search-icon {
        padding: 0 10rpx;
      }
    }
    button {
      width: 158rpx;

      line-height: 60rpx;
      font-size: 30rpx;
      border: 1px solid #aaa;
      background: #ccc;
      margin-left: 15rpx;
    }
  }
  .qs-content {
    padding: 0 10rpx;
    background: goldenrod;
    .qs-item {
      padding: 10rpx 0;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
      border-bottom: 1px solid #fff;
    }
  }
  .history-tytle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    font-size: 40rpx;
  }
  .history {
    display: flex;
    flex-wrap: wrap;
    .history-item {
      background: #ccc;
      padding: 20rpx;
      text-align: center;
      margin: 10rpx;
    }
  }
}
</style>
